<template>
	<view class="homePage" style="padding-top: 1px;">
		<view v-if="false" class="headerBox home-top" :style="{paddingTop: systemBarHeight + 10 + 'px'}">
			<view class="flex align">
				<view style="width: 50rpx;">
					<image @click="onSkip('/package/mine/messageNotification')"
						src="https://wx.2024csnl.com/static/home/message.png" mode="aspectFill" class="home-msg" />
				</view>
				<view style="flex:1;" class="flex align">
					<view style="flex:1; text-align: center;" @click="onSkip('/package/mine/myOrderList/myOrderList')">
						<text style="color: white;">商圈</text>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view style="flex:1; text-align: center;" @click="onChargeOff">
						<text style="color: white;">扫一扫</text>
					</view>
					<!--  #endif -->
					<view style="flex:1; text-align: center;" @click="onSkip('/pages/holdshares/rankingList')">
						<text style="color: white;">排名</text>
					</view>
				</view>
				<view style="width: 50rpx;" @click="onSkip('/package/mine/setUp/setUp')">
					<image src="https://wx.2024csnl.com/static/home/settings.png" mode="aspectFill"
						class="home-settings" />
				</view>
			</view>
		</view>
		<!-- 主要内容区 -->
		<view class="mainBox">
			<baidu-map v-if="false" ref="baiduMap" :heightRatio="baiduMapheightRatio"
				:customStyle="`width:100vw;height:${windowHeight * baiduMapheightRatio}px;`"></baidu-map>
			<view v-if="false" class="swiperBigBox" style="position: relative;">
				<swiper class="swiper-box" circular :autoplay="true" :interval="3000" @change="changeswiper"
					:current="currentswiper" :duration="500">
					<swiper-item v-for="(item,i) in swiperList" :key="i" @click="goBannerDetails(item)">
						<image :src="item.img" mode="aspectFill" :style="{backgroundColor:item}" class="swiper-img" />
						<view class="swiperNumBox">
							{{currentswiper+1}}/{{swiperList.length}}
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="false" style="margin: 0 30rpx;">
				<uni-notice-bar scrollable="true" v-if="noticeList.length!=0" background-color="#fff"
					:text="noticeList">
				</uni-notice-bar>
			</view>
			<m-tab-list v-if="false" :otherOrderTypeList="navList"></m-tab-list>
			<!-- 宣传轮播 -->
			<view v-if="false" class="imgSwiperBox">
				<swiper class="swiper-box imgSwiper" circular :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(item,i) in publicityList" :key="i"
						@click="onSkip(`${item.navigationurl}?img=${item.image}`)">
						<image :src="item.navigationphoto" mode="aspectFill" :style="{backgroundColor:item}"
							class="swiper-img imgSwiperImg" />
					</swiper-item>
				</swiper>
			</view>
			<view v-if="false" class="between" style="padding: 20rpx;">
				<image v-for="(item,i) in cardList" :key="i" @click="onSkip(item.page)"
					:src="`https://wx.2024csnl.com/static/home/${item.icon}.png`" mode="aspectFill"
					class="img-card" />
			</view>
			<view class="" style="background-color: white; padding-top: 10px;">
				<view v-if="false" class="flex align label-name">
					<view class="label-left" />
					<view class="">热门商家</view>
					<view class="label-right" />
				</view>
				<view class="flex align home-dz-ss">
					<view class="flex align " @click="onChoseCity">
						<view class="">{{city}}</view>
						<image src="https://wx.2024csnl.com/static/home/home-dw.png" mode="aspectFill"
							class="home-dw" />
					</view>
					<view class="flex align search-box">
						<image src="https://wx.2024csnl.com/static/home/home-search.png" mode="aspectFill"
							class="home-search" />
						<input type="text" placeholder="搜索商铺名称" placeholder-class="p-c" v-model="keyWords"
							@confirm="onRefiresh">
					</view>
				</view>
			</view>
			<view class="between" style="background-color: white;">
				<view class="between align type-list" style="width: 70%;">
					<view class="flex align " v-for="(type,index) in typeList" :key="index" @click="checkType(type.id)">
						<view :class="typeIndex==type.id?'xl-act':''">{{ type.title }}</view>
						<image v-if="typeIndex==type.id" src="https://wx.2024csnl.com/static/home/home-xlr.png"
							mode="aspectFill" class="home-xl" />
						<image v-else src="https://wx.2024csnl.com/static/home/home-xlb.png" mode="aspectFill"
							class="home-xl" />
					</view>
				</view>
				<view class="between align type-list">
					<picker @change="bindPickerChange" :value="filterIndex" :range="filterList" range-key="name">
						<view class="flex align ">
							<view :class="typeIndex==typeLast.id?'xl-act':''"
								style="width: 65rpx;overflow: hidden;height: 40rpx;">{{typeLast.title }}</view>
							<image v-if="typeIndex==typeLast.id"
								src="https://wx.2024csnl.com/static/home/home-xlr.png" mode="aspectFill"
								class="home-xl" />
							<image v-else src="https://wx.2024csnl.com/static/home/home-xlb.png" mode="aspectFill"
								class="home-xl" />
						</view>
					</picker>
				</view>
			</view>
			<view class="goods-list">
				<view class="goods-item flex" v-for="(goods,index) in goodsList" :key="index"
					@click="onSkip(`/business/pages/business_tab/home?bid=${goods.bid}`)">
					<image :src="goods.logo" mode="aspectFill" class="goods-img" />
					<view class="fl between column">
						<view class="">{{ goods.name }}</view>
						<view class="between align score">
							<view class="flex align ">
								<view class="flex align">
									<image src="https://wx.2024csnl.com/static/home/star.png" mode="aspectFill"
										class="star" />
									<view class="score-num">{{ goods.comment_score }}</view>
								</view>
								<view class="month-sales">销量{{ goods.sales}}</view>
							</view>
							<view class="">{{ goods.juli }}</view>
						</view>
					</view>
				</view>
				<view class="flex-center addressImgBox" v-if="goodsList.length==0">
					<image src="https://wx.2024csnl.com/static/noData.png"></image>
					暂无数据~
				</view>
				<view style="text-align: center;color: #999;" v-if="noMoreData &&goodsList.length!=0">没有更多啦~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		getLocationInfo,
		place
	} from "../../utils/index.js"
	import {
		getEquity,
		getSlideshow,
		getAnnouncement,
		getHotMerchant,
		getFiltrate,
		getPublicity,
		getAppConfigSync
	} from "../../api/index.js"
	export const debounce = (fn, time) => {
		let timer = null;
		return function(...args) {
			if (timer) {
				clearTimeout(timer);
			}
			let ctx = this;
			timer = setTimeout(function() {
				timer = null;
				fn.apply(ctx, args);
			}, time)
		}
	}
	export default {
		data() {
			return {
				baiduMapheightRatio: 0.55,
				windowWidth: 0,
				windowHeight: 0,
				mainBoxStype: 'marginTop',
				currentswiper: 0, //广告位当前轮播图idx
				noMoreData: false,
				typeIndex: 5, //默认综合分类
				filterBusId: '', //选择的分类id
				typeList: [{
						title: '综合',
						id: 5,
					},
					{
						title: '喜好',
						id: 1,
					},
					{
						title: '距离',
						id: 2,
					},
					{
						title: '评分',
						id: 3,
					},

				],
				typeLast: {
					title: '分类',
					id: 4,
				},
				noticeList: [], //公告
				equityList: [], //权益列表
				systemBarHeight: getApp().globalData.systemBarHeight,
				headerOpacity: '',
				swiperList: [],
				navList: [],
				cardList: [{
						icon: 'home-one',
						page: '/pages/goods/integral-mall'
					},
					{
						icon: 'home-two',
						page: '/pages/holdshares/rankingList'
					}
				],
				goodsList: [], //商家列表
				filterList: [], //分类列表
				filterIndex: 0, //筛选数据
				city: '获取中',
				selectCity: '',
				latitude: '',
				longitude: '',
				pagenum: 1, //分页
				keyWords: '', //搜索内容
				totalPage: '',
				publicityList: [], //宣传轮播图
			}
		},
		mounted() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth
					_this.windowHeight = res.windowHeight
				},
			});
		},
		async onLoad() {
			// #ifdef H5
			this.onGetArea()
			this.mainBoxStype = 'paddingTop'
			// #endif
			// #ifdef APP-PLUS
			let platform = uni.getSystemInfoSync().platform
			if (platform == 'ios') {
				this.onGetArea()
			}
			if (platform == 'android') {
				var _taht = this;
				uni.getStorage({
					key: 'LocationIsAuthorization',
					success: function(res) {
						if (res.data == 'true') {
							_taht.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
						}
					}
				});
			}
			// #endif
			await this.onGetFiltrate()
			if (this.selectCity) {
				this.city = this.selectCity
			}
			this.onReqGetEquity()
			this.onGetSlideshow()
			this.onGetPublicity()
			this.onGetAnnouncement()
			this.onGetHotMerchant()
		},
		onTabItemTap(e) {},
		onShow() {
			uni.$on('city', (data) => {
				this.city = data
				this.latitude = ''
				this.longitude = ''
				this.onRefiresh()
			})

			uni.$on('locationCity', (address) => {
				if (address) {
					const {
						latitude,
						longitude
					} = address

					this.city = place(address.address.city)
					this.latitude = latitude
					this.longitude = longitude
					this.onRefiresh()
				} else {
					this.onRefiresh()
				}

			})
		},
		onPageScroll: debounce(function(e) {
			var _this = this
			//_this.$refs.baiduMap.scrollTo(e)
		}, 1),
		onReachBottom() {
			if (this.pagenum < this.totalPage) {
				this.pagenum += 1
				this.onGetHotMerchant('bottom')
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			deBounce(fn, time) {
				let timer = null;
				return function(...args) {
					if (timer) {
						clearTimeout(timer);
					}
					let ctx = this;
					timer = setTimeout(function() {
						timer = null;
						fn.apply(ctx, args);
					}, time)
				}
			},
			onChoseCity() {
				if (this.city == '获取中') {
					this.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION', 'click')
				} else {
					this.onSkip(`/package/mine/choseCity?city=${this.city}`)
				}
			},
			async requestAndroidPermission(permisionID, type) {
				const result = await permision.requestAndroidPermission(permisionID)
				if (result == 1) {
					if (permisionID == 'android.permission.ACCESS_FINE_LOCATION') {
						uni.setStorage({
							key: 'LocationIsAuthorization',
							data: 'true',
							success: function() {}
						});
					}

					if (type == 'click') {
						this.showToast('获取定位中~')
					}
					this.onGetArea()
					setInterval(() => {
						this.onGetArea()
					}, 600000)
				} else if (result == 0) {
					if (type == 'click') {
						this.showToast('您未授权定位,请到设置中开启~')
					}
				} else {
					if (type == 'click') {
						this.showToast('您未授权定位,请到设置中开启~')
					}
				}
			},
			// 宣传轮播
			async onGetPublicity() {
				const res = await getPublicity(`s=ApiIndex/navigationphone`)
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.publicityList = data
				} else {
					this.showToast(msg)
				}
			},
			changeswiper(e) {
				this.currentswiper = e.detail.current
			},

			getParam(path, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(path))
					return unescape(RegExp.$2.replace(/\+/g, " "));
				return "";
			},
			onChargeOff() {
				var that = this

				uni.scanCode({
					onlyFromCamera: true,
					autoZoom: false,
					success: (res) => {
						setTimeout(() => {
							const bid = that.getParam(res.result, "bid");
							const bindbid = that.getParam(res.result, "bindbid");
							if (bid != '' || bindbid != '') {
								that.onSkip(
									`/business/pages/business_tab/qrCodePay?bid=${bid}&bindbid=${bindbid}`
								)
							} else {
								that.showToast('无效二维码')
							}
						}, 800)
					}
				});


			},
			goBannerDetails(item) {
				if (item.navigationurltype == 7) {
					this.onSkip(`/package/mine/bannerDeteails?type=web&url=${item.url}`)
				} else {
					this.onSkip(item.url)
				}
			},
			onRefiresh() {
				this.goodsList = []
				this.pagenum = 1
				this.onGetHotMerchant()
			},
			async onGetHotMerchant(type) {
				let seCity = ''
				this.city != '获取中' ? seCity = `${this.city}市` : seCity = ''
				const sort = this.typeIndex == 1 ? 'like' : this.typeIndex == 2 ? 'juli' : this.typeIndex == 3 ?
					'scoredesc' : this.typeIndex == 5 ? 'all' : ''
				const res = await getHotMerchant(
					`s=/ApiIndex/businesslist&latitude=${this.latitude}&longitude=${this.longitude}&city=${seCity}&sortby=${sort}&category=${this.filterBusId}&pagenum=${this.pagenum}
					&words=${this.keyWords}`)
				const {
					data,
					status,
					total,
					msg
				} = res.data
				if (status == 1) {
					this.totalPage = total
					type == 'bottom' ? this.goodsList.push(...data) : this.goodsList = data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			checkType(id) {
				this.typeIndex = id;
				this.filterBusId = null
				this.typeLast.title = '分类'
				this.onRefiresh()
			},
			bindPickerChange(e) {
				this.filterIndex = e.detail.value;
				this.filterBusId = this.filterList[e.detail.value].id
				this.typeLast.title = this.filterList[e.detail.value].name
				this.onRefiresh()
			},
			async onGetFiltrate() {
				const res = await getFiltrate('s=/ApiIndex/businesstypes')
				const {
					status,
					msg,
					data
				} = res.data
				if (status == 1) {
					this.filterList = data
				} else {
					this.showToast(msg)
				}
			},
			async onGetArea() {
				let address = await getLocationInfo()
				if (address) {
					const {
						latitude,
						longitude
					} = address
					if (this.selectCity != '') {
						this.city = this.selectCity
						this.latitude = latitude
						this.longitude = longitude
						this.onRefiresh()
					} else {
						this.city = place(address.address.city)
						this.latitude = latitude
						this.longitude = longitude
						this.onRefiresh()
					}

				} else {
					setTimeout(() => {
						this.onGetArea()
					}, 5000)
				}
			},
			async onGetAnnouncement() {
				const res = await getAnnouncement('s=/ApiIndex/appnotice')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.noticeList = data
				} else {
					this.showToast(msg)
				}
			},
			async onGetSlideshow() {
				let res = await getSlideshow('s=/ApiIndex/banner')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.swiperList = data
				} else {
					this.showToast(msg)
				}
			},
			async onReqGetEquity() {
				const res = await getEquity('s=/ApiIndex/recomgoods')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.equityList = data
				} else {
					this.showToast(msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p-c {
		color: #ccc;
		font-size: 26upx;
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.homePage {
		background-color: #eee;

		.headerBox {
			// #ifdef APP-PLUS
			padding: 30rpx 20rpx 20rpx 20rpx;
			// #endif
			// #ifdef H5
			padding: 30rpx;
			// #endif
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
		}
	}

	.home-top {
		background: #000000;
	}

	.home-nav {
		margin: 10rpx 0;
		padding-bottom: 10rpx;
	}

	.home-msg {
		width: 50rpx;
		height: 50rpx;
	}

	.home-settings {
		width: 50rpx;
		height: 50rpx;
	}

	.search-box {
		background-color: #FFF;
		border-radius: 13rpx;
		flex: 1;
		padding: 20rpx 28rpx;

		.home-search {
			width: 25rpx;
			height: 25rpx;
		}

		.home-search-input {
			font-size: 27rpx;
			margin-left: 16rpx;
		}

		.home-search-btn {
			padding-left: 28rpx;
			color: #41644A;
			font-size: 27rpx;
			border-left: 1rpx solid #F0F0F0;
		}
	}

	.swiperBigBox {
		background: #41644A;
		padding-top: 20rpx;
		height: 240rpx;
		border-radius: 0 0 40rpx 40rpx;
		margin-bottom: 160rpx;

		.swiper-box {
			// padding-top: 14rpx;
			width: 710rpx;
			height: 350rpx;

			margin: 20rpx auto;
			border-radius: 54rpx 54rpx 30rpx 30rpx;
			overflow: hidden;
			transform: translateY(0);

			.swiper-img {
				width: 710rpx;
				height: 350rpx;
				border-radius: 30rpx;
				background-color: #f7f7f7;
			}
		}
	}

	.img-card {
		width: 347rpx;
		height: 200rpx;
	}

	.home-invite {
		width: 710rpx;
		height: 233rpx;
		display: block;
		margin: 0 auto;
	}

	.label-name {
		justify-content: center;
		padding: 40rpx;
		font-size: 36rpx;
		font-weight: bold;

		.label-left,
		.label-right {
			width: 136rpx;
			height: 12rpx;
			border-radius: 8rpx;
			background-image: linear-gradient(to right, #FFF8F8, #41644A);
			margin: 0 20rpx;
		}

		.label-right {
			background-image: linear-gradient(to left, #FFF8F8, #41644A);
		}
	}

	.home-dz-ss {
		font-size: 26upx;
		padding: 20rpx;
		padding-top: 0;

		.home-dw {
			width: 25rpx;
			height: 25rpx;
			margin-left: 16rpx;
		}

		.search-box {
			background-color: #F5F5F5;
			flex: 1;
			margin-left: 40rpx;
			margin-right: 0;

			input {
				font-size: 27rpx;
				margin-left: 16rpx;
			}
		}
	}

	.type-list {
		color: #333;
		// padding: 20rpx;
		padding: 0 35rpx 30rpx;
		padding-top: 0;
		font-size: 26upx;

		.home-xl {
			width: 17rpx;
			height: 12rpx;
			margin-left: 12rpx;
		}

		.xl-act {
			color: #41644A;
		}
	}

	.goods-list {
		background: #F7F7F7;
		padding: 20rpx;

		.goods-item {
			padding: 27rpx 20rpx;
			background-color: #FFF;
			border-radius: 20rpx;
			font-size: 29rpx;
			margin: 20rpx 0;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
				background-color: #999999;
				margin-right: 24rpx;
				border-radius: 13rpx;
			}

			.star {
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}

			.score {
				font-size: 24rpx;
				color: #999999;

				.score-num {
					color: #FFC823;
				}

				.month-sales {
					margin-left: 16rpx;
				}
			}

			.goods-discount {
				font-size: 24rpx;
				padding: 6rpx 15rpx;
				background-color: #EF1B1B;
				color: #FFF;
				display: inline-block;
				border-radius: 8rpx;
			}

			.goods-tickets {
				font-size: 24rpx;
				padding: 6rpx 0;
				border-radius: 8rpx;
				border: 1rpx solid #EF1B1B;
				color: #EF1B1B;
				margin-left: 20rpx;

				.tickets-item {
					display: inline-block;
					padding: 0 15rpx;
					border-right: 1rpx solid #EF1B1B;
				}

				.tickets-item:last-child {
					border-right: none;
				}
			}
		}
	}

	.imgSwiper {
		width: 92vw;
		height: 233rpx;
		border-radius: 30rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.imgSwiperBox {
		margin: 0 30rpx;
		border-radius: 40rpx;
	}

	.imgSwiperImg {
		width: 92vw;
		height: 233rpx;
		border-radius: 30rpx;
	}

	.swiperNumBox {
		background: rgba(0, 0, 0, 0.3);
		border-radius: 25px;
		padding: 3rpx 15rpx;
		position: absolute;
		font-size: 26rpx;
		bottom: 20rpx;
		right: 20rpx;
		color: #fff;
	}
</style>